<template>
  <div class="main_table mg-t-0">
    <el-table
      ref="MainTable"
      v-loading="loading"
      :data="tableData"
      element-loading-text="加载中"
      fit
      :border="border"
      highlight-current-row
      :height="height"
      v-on="$listeners"
      v-bind="$attrs"
      :stripe="stripe"
      lazy
    >
      <slot name="selection"></slot>
      <el-table-column type="selection" v-if="showSelection" />
      <slot name="expand"></slot>
      <el-table-column label="序号" type="index" width="60" v-if="showIndex"></el-table-column>
      <template v-for="item in columns">
        <template v-if="fieidList.includes(item.field) || !fieidList.length">
          <el-table-column
            :key="item.label"
            :label="item.label"
            :prop="item.prop"
            :width="item.width"
            :sortable="item.sort"
            :fixed="item.fixed"
            :show-overflow-tooltip="item.showTooltip"
          >
            <template slot-scope="{ row, $index }">
              <slot v-if="item.slot" :name="item.prop" :row="row" :tableIndex="$index"></slot>  
              <span v-else>{{ row[item.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </template>
      <slot></slot>
    </el-table>
  </div>
</template>
<script>
// import { mixins } from "@/mixins/index.js";
export default {
  // mixins: [ mixins ],
  name: "MainTable",
  props: {
    columns: {    //  表头
      type: Array,
      required: true
    },
    tableData: {    //  表格数据
      type: Array,
      required: true
    },
    showSelection: {  //  是否开启选择框
      type: Boolean,
      default: () => false
    },
    showIndex: {  //  是否开启序号
      type: Boolean,
      default: () => false
    },
    loading: {    //  数据加载loading
      type: Boolean,
      default: false
    },
    fieidList: {  //  是否开启表头设置功能
      type: Array,
      default: () => []
    },
    stripe: {   //  是否开启表格斑马纹
      type: Boolean,
      default: false
    },
    border: {   //  是否开启表格边框
      type: Boolean,
      default: false
    },
    height: {
      type: [String, Number]
    }
  },
  data() {
    return {};
  },
  methods: {
    getScroll() {
      return this.$refs.MainTable.bodyWrapper
    },
    getTableRef() {
      return this.$refs.MainTable
    },
    // load(tree, treeNode, resolve) {
    //   this.$emit('load', tree)
    // }
  },
  mounted() {
  }
};
</script>
<style lang="scss" scoped>
.main_table {
  width: 100%;
  &.mg-t-0 {
    margin-top: 0;
  }
  /deep/.el-table__expanded-cell {
    padding: 0;
  }
}
</style>